﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            border: 1px solid red;
            width: 800px;
            height: 600px;
        }

        div {
            border: 1px solid blue;
            width: 600px;
            height: 400px;
        }

        p {
            border: 1px solid green;
            width: 400px;
            height: 300px;
        }

        span {
            display: block;
            border: 1px solid pink;
            width: 200px;
            height: 100px;
        }
    </style>
    <script type="text/javascript">
        var showMSG = function (e) {
            // alert(this);

            // alert(e.currentTarget);

            alert(event.srcElement)

            // ie8的做法
            event.cancelBubble = true;

            // e.stopPropagation();
        };
        onload = function () {
            document.getElementsByTagName("body")[0].onclick = showMSG;
            document.getElementsByTagName("div")[0].onclick = showMSG;
            document.getElementsByTagName("p")[0].onclick = showMSG;
            document.getElementsByTagName("span")[0].onclick = showMSG;
        };

    </script>
</head>
<body>
    <div>
        <p>
            <span></span>
        </p>
    </div>
</body>
</html>
